<template>
  <view class="main">
    <view class="main_header">
      <view class="container">
        <image class="banner" src="@/static/img/my_back.png" />
      </view>
      <view class="main_header_image">
        <van-uploader @before-read="beforeRead" @after-read="afterRead" :max-size="3072 * 1024" :oversize="onOversize">
          <image :src="userUrl" />
		</van-uploader>
      </view>
      <view class="main_header_name">
        {{ nickname }}
      </view>
    </view>
    <view class="main_box">
      <van-cell-group>
        <van-cell v-for="(item, index) in gridList" :key="index" :is-link="item.isLink" @click="handleEventForward(item)">
          <template #title>
			 <!-- <VIcon :name="item.icon" /> -->
			 <image :src="item.icon" class="icons"></image>
            <span class="custom-title">{{ item.title }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </view>
  </view>
</template>

<script>
import { logout, uploadHeadIcon } from "@/api/personal/index.js";

import { baseURL, uploadURL, testURL } from "@/api/base.js";
import {getUserInfo} from '@/api/personal/index.js'
import sculptureimage from "@/static/img/sculpture.png";
import myBackimage from "@/static/img/my_back.png";
import sculpture from "@/static/img/sculpture.png"

export default {
  data() {
    return {
      userUrl: '',
      bgUrl: myBackimage,
      nickname: "",
      gridList: [
        {
          title: "个人信息",
          icon: "../../static/img/gerenxinxilogo.png",
          event: "viewPersionInfo",
          isLink: true,
        },
        {
          title: "版本检查",
          icon: "../../static/img/banbengengxin.png",
          event: "checkVersion",
          isLink: false,
        },
        {
          title: "修改密码",
         icon: "../../static/img/xiugaimima.png",
          event: "changePassWord",
          isLink: true,
        },
        {
          title: "修改用户信息",
          icon: "../../static/img/xiugaiyonghuxinxi.png",
          event: "changeUserInfo",
          isLink: true,
        },
        {
          title: "退出登录",
          icon: "../../static/img/tuichudenglu.png",
          event: "handleLogout",
          isLink: false,
        },
      ],
      userinfo: {},
    };
  },
  // components:{VIcon},
  onShow() {
    this.init();
  },

  methods: {
    init() {
      const user = uni.getStorageSync("user");
      this.userUrl = user.head_ico||sculpture;
      this.userinfo = user;
      this.nickname = user.nickname;
    },
    checkVersion() {
      uni.showLoading({
        title: "检查新版本...",
        success() {
          setTimeout(() => {
            uni.hideLoading();
            uni.showToast({
              title: "当前暂无新版本",
            });
          }, 3000);
        },
      });
    },
    handleEventForward(item) {
      this[item.event]();
    },
    viewPersionInfo() {
      uni.navigateTo({
        url: "../userInfo/userInfo",
      });
    },
    onOversize(file) {
      console.log("oversize");
      uni.showToast({ title: "文件大小不能超过 3M" });
      // Toast("文件大小不能超过 3M");
    },
    beforeRead(event) {
      console.log("beforeread");
      // 返回布尔值
      const { file, callback } = event.detail;
      callback(() => {
        if (file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/jpg" && file.type !== "image/gif") {
          // Toast("请上传 jpg/jpeg/png/gif 格式图片");
          uni.showToast({
            title: "请上传 jpg/jpeg/png/gif 格式图片",
          });
          return false;
        }
        return true;
      });
    },
    afterRead(event) {
      plus.io.resolveLocalFileSystemURL(event.detail.file.url, (entry) => {
        console.log(entry, "entry");
        entry.file((file) => {
			console.log('file',file)
          const fileReader = new plus.io.FileReader();
          fileReader.readAsDataURL(file);
          fileReader.onloadend = (event) => {//读取成功后的回调
		  // if((file.size*10)>(3072 * 1024)){
			 //  console.log('执行压缩','src:',`_www/${entry.name}`,'dst:',`_doc/${entry.name}`,)
			 //  plus.zip.compressImage({
				//   src:`_www/${entry.name}`,
				//   dst:`_doc/${entry.name}`,
				//   quality:20
			 //  },()=>{console.log('成功')},(error)=>{console.log('错误',error)})
		  // }
            console.log('图片图片',event);
            const token = uni.getStorageSync("token");
            const postData = {
              id: this.userinfo.id,
              file: event.target.result,
            };
            uploadHeadIcon(token, postData).then((re) => {
              this.userUrl = re.data.headico_url;
			  const user=uni.getStorageSync("user")
			  user.head_ico=re.data.headico_url
			  uni.setStorageSync('user',user)
              setTimeout(() => {
                uni.showToast({
                  title: "上传成功",
                });
              }, 1000);
            });
          };
        });
      });
    },
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确认退出登录吗？",
        confirmText: "取消",
        cancelText: "确定",
        success({ confirm, cancel }) {
          if (confirm) return;
          const token = uni.getStorageSync("token");
          const data = {
            token,
          };
          logout(data).then((res) => {
            uni.removeStorageSync("token");
            uni.removeStorageSync("time");
			uni.reLaunch({
				url:'/pages/login/login'
			})
          });
        },
      });
    },
    //修改密码事件
    changePassWord() {
      uni.navigateTo({
        url: "../changePassword/changePassword",
      });
    },
    changeUserInfo() {
      uni.navigateTo({
        url: "../changeUserInfo/changeUserInfo",
      });
    },
    btnRoute(item) {
      this.$router.push({
        path: item.linkUrl,
        query: {},
      });
    },

    getUserInfo() {
      //获取用户信息-头像
      const token = localStorage.getItem("token");
	  getUserInfo(token).then((re) => {
        console.log("myindex", re);
        //用户头像
        this.userUrl = re.data.head_ico;
      });
    },
  },
};
</script>

<style scoped>
.main {
  flex: 1;
}

.main_header {
  height: 400rpx;
}

.main_header img {
  height: 100%;
}

.container {
  position: absolute;
  height: 400rpx;
  z-index: -1;
  width: 100vw;
}

.container image {
  height: 400rpx;
  width: 100%;
}

.header {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.header p {
  color: #ffffff;
  font-size: 35rpx;
}

.main_header_image {
  width: 100%;
  padding: 45rpx 0;
  text-align: center;
}

.main_header_image image {
  width: 125rpx;
  height: 125rpx;
  border-radius: 50%;
}

.main_header_name {
  text-align: center;
  color: #ffffff;
  font-size: 35rpx;
}

.main_box {
  width: 100%;
  height: calc(100% - 400rpx);
  background-color: #f2f2f2;
  position: absolute;
  padding-top: 0.3em;
  box-sizing: border-box;
}

.van-cell__title /deep/.icon {
  margin-right: 8px;
}

/deep/.van-icon-arrow:before {
  content: "";
}
.icons{
	width: 27rpx;
	height: 27rpx;
	vertical-align:middle;
	margin-right: 20rpx;
}
</style>
